<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联动下拉框</title>
</head>
<body>
    <select name="province" id="province">
        <option value="">请选择</option>
        <option value="北京">北京</option>
        <option value="河北">河北</option>
        <option value="山西">山西</option>
        <option value="河南">河南</option>
        <option value="辽宁">辽宁</option>
        <option value="吉林">吉林</option>
        <option value="内蒙古">内蒙古</option>
    </select>
    <select name="city" id="city">
        <option value="">请选择</option>
    </select>
    
<script>
    var data = {
        "北京": ["东城区","西城区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县"],
        "河北": ["石家庄市","唐山市","秦皇岛市","邯郸市","邢台市","保定市","张家口市","承德市","沧州市","廊坊市","衡水市"],
        "山西": ["太原市","大同市","阳泉市","长治市","晋城市","朔州市","晋中市","运城市","忻州市","临汾市","吕梁市"],
        "河南": ["郑州市","开封市","洛阳市","平顶山市","安阳市","鹤壁市","新乡市","焦作市","濮阳市","许昌市","漯河市","三门峡市","南阳市","商丘市","信阳市","周口市","驻马店市","济源市"],
        "辽宁": ["大连市","鞍山市","抚顺市","本溪市","丹东市","锦州市","营口市","阜新市","辽阳市","盘锦市","铁岭市","朝阳市","葫芦岛市"],
        "吉林": ["长春市","吉林市","四平市","辽源市","通化市","白山市","松原市","白城市","延边朝鲜族自治州"],
        "黑龙江": ["哈尔滨市","齐齐哈尔市","鸡西市","鹤岗市","双鸭山市","大庆市","伊春市","佳木斯市","七台河市","牡丹江市","黑河市","绥化市","大兴安岭地区"]
    };

    var province = document.getElementById('province');
    var city = document.getElementById('city');

    // province.onchange = function(){
    //     var cities = data[this.value],
    //         options = '<option value="">请选择</option>';
    //     for (var i = 0; i < cities.length; i++) {
    //         options += '<option value="'+cities[i]+'">'+cities[i]+'</option>';
    //     }
    //     city.innerHTML = options;
    // };
    province.onchange = function(){
        city.innerHTML = "";
        
        var cities = data[this.value];

        var fragment = document.createDocumentFragment();
        
        var defaultOption = document.createElement("option");
        defaultOption.value = "";
        defaultOption.innerHTML = "请选择";

        fragment.appendChild(defaultOption);
        // city.appendChild(defaultOption);
        for (var i = 0; i < cities.length; i++) {
            var option = document.createElement("option");
            option.value = cities[i];
            option.innerHTML = cities[i];
            fragment.appendChild(option);
            // city.appendChild(option);
        }
        city.appendChild(fragment);
    };

</script>    
</body>
</html>